<template>
  <el-row type="flex" class="row-bg" justify="center">
    <el-col :span="6" :xl="6" :lg="7">
      <div class="grid-content bg-purple"><h2>欢迎来到</h2></div>
      <el-image style="border-radius: 25px" :src="require('@/assets/peizheng.jpg')"></el-image>

      <p>请关注微博 “培正森林”</p>

    </el-col>

    <el-col :span="1">
        <el-divider direction="vertical" ></el-divider>
    </el-col>

    <el-col :span="6">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="用户名" prop="username" style="width: 380px">
          <el-input v-model="ruleForm.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width: 380px">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
          <el-button @click="resizeTo('ruleForm')">取消</el-button>
          <el-button @click="resign()">注册</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        code: '',
        token: ''

      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },

        ],
        password: [
          { required: true, message: '请选择密码', trigger: 'blur' }
        ]


      }

    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          this.$axios.post('/login',this.ruleForm).then(res =>{

            //获取后端返回的认证码
            const token = res.headers['authorization']
            //使用store里面的方法，将认证码提交到store
            this.$store.commit('SET_TOKEN', token)
            //使用store里面的方法，将用户信息提交到store
            this.$store.commit('SET_USERINFO', res.data.data)
            this.$router.push("/blogs")


          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resizeTo(formName) {
      this.$refs[formName].resetFields();
    },
    resign()
    {
      this.$router.push("/register ")
    }


  },


}
</script>
<style scoped>
.el-row {
  background-color: #fafafa;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
}

.captchImg
{
float: left;
  margin-left: 8px;
  border-radius: 4px;
}

/*分割线样式*/
.el-divider{
  height: 250px;
}
</style>